<template>
  <div class="mainInfo__form">
    <el-table stripe :data="tableData" style="width: 100%"
              border
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
              v-loading="loading"
              element-loading-text="Loading..."
              :element-loading-spinner="svg"
              element-loading-svg-view-box="-10, -10, 50, 50"
    >

      <el-table-column label="序号" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="通知类型" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="属性" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.attribute }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.state }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <!--              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>-->
          <el-text @click="handleStateStop(scope.row.id,scope.$index)" class="mx-1" type="primary" v-show="scope.row.state ==='1'">停用</el-text>
          <el-text @click="handleStateOpen(scope.row.id,scope.$index)" class="mx-1" type="primary" v-show="scope.row.state ==='0'">启用</el-text>
          <el-text @click="edit(scope.$index, scope.row)" class="mx-1 bj" type="primary">编辑</el-text>
          <el-text @click="handleDel(scope.row.id,scope.$index)" class="mx-1" type="primary">删除</el-text>
        </template>
      </el-table-column>

    </el-table>
  </div>
  <paging v-if="pagState" @pag="handlePag" @pag-add="handlePagAdd" @pag-reduce="handlePagReduce" @pag-skip="handleSkip" :msg="pageList" />


  <!-- 弹出层 -->
  <el-dialog v-model="dialogFormVisible" title="Shipping address">

    <el-form :model="typeFormList">
      <el-form-item label="ID" :label-width="formLabelWidth">
        <el-input v-model="typeFormList.id"/>
      </el-form-item>

      <el-form-item label="通知类型" :label-width="formLabelWidth">
        <el-input v-model="typeFormList.name"/>
      </el-form-item>

      <el-form-item label="属性" :label-width="formLabelWidth">
        <el-select v-model="typeFormList.attribute" placeholder="请选择">
          <el-option label="内置" value="1" />
          <el-option label="自定义" value="0" />
        </el-select>
      </el-form-item>

      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="typeFormList.state " placeholder="请选择">
          <el-option label="启用" value="1" />
          <el-option label="停用" value="0" />
        </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleModify">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {defineAsyncComponent, reactive, ref} from "vue";
import service from "@/api";
import { ElNotification } from 'element-plus'
import {jxTypeModify} from "@/api/jiaxiaohutong";

const paging = defineAsyncComponent(() => import('@/components/paging.vue'))
const loading = ref(true)
const emits = defineEmits(['typeList'])
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

interface informTypeList {
  id: number
  name: string
  attribute: string
  state: string
}
let tableData: informTypeList[] = reactive([]) // 表格数据存贮(渲染数据)
let inFormList = ref() // 表格数据获取
let pages = ref(1) // 当前页
let total = ref(5) // 条数
let pagState = ref(false) // 当获取到数据展示分页

let pageList = '' // 分页数据，需要传递给分页子组件
const getRes = async (pagDate: { cp: number; ps: number; })=> {
  const res = await service.jiaxiaohutong.jxinformTypeList(pagDate)
  inFormList.value = res.data.data.date // 表格数据
  pageList = res.data.data.page // 分页数据
  pagState.value = true // 当有数据展示分页条

  // 对获取的对象数据转化为数组形式
  for (let i = 0; i < inFormList.value.length; i++) {
    tableData.push(inFormList.value[i])
  }
  loading.value = false // 加载动画 关闭
  console.log(res.data.data.date.length)
  emits('typeList', res.data.data.date.length)
}
getRes({cp: pages.value,ps: total.value})


// 分页条数更改数据
function listMain(upDate:{pages: number,total: number}) {
  loading.value = true
  tableData.length=0
  getRes({cp: upDate.pages-1,ps: upDate.total})

}

// 条数变更
function handlePag(value: {pages: number,total: number}) {
  listMain(value)
}
// 增加
function handlePagAdd(value: {pages: number,total: number}) {
  listMain(value)
}

// 减少
function handlePagReduce(value: {pages: number,total: number}) {
  listMain(value)
}

// 跳转
function handleSkip(value: {pages: number,total: number}) {
  listMain(value)
}

// 停用
let stateType = ref()
async function handleStateStop(id:number,index: number) {
  const res = await service.jiaxiaohutong.jxInformTypeStateStop(id)
  if (res.statusText === 'OK') {
    ElNotification({
      title: 'OK',
      message: '修改状态成功',
      type: 'success',
    })
    stateType.value = false
    tableData[index].state = '0'
  } else {
    return
  }
}
// 启用
async function handleStateOpen(id:number,index: number) {
  const res = await service.jiaxiaohutong.jxInformTypeStateOpen(id)
  stateType.value = true
  if (res.statusText === 'OK') {
    ElNotification({
      title: 'OK',
      message: '修改状态成功',
      type: 'success',
    })
    stateType.value = false
    tableData[index].state = '1'
  } else {
    return
  }
}

// 删除
async function handleDel(id: number,index: number){
  const res = await service.jiaxiaohutong.jxInformTypeDel(id)
  if (res.statusText === 'OK') {
    ElNotification({
      title: 'OK',
      message: '删除成功',
      type: 'success',
    })
    delete tableData[index]
  } else {
    return
  }
}


// 编辑
interface typeForm {
  id: number,
  name: string,
  attribute: string,
  state: string
}
const typeFormList: typeForm = reactive({
  id: 0,
  name: '',
  attribute: '',
  state: ''
})


let ModifyIndex = 0
function edit(index: number, row: typeForm) {
  dialogFormVisible.value = true
  console.log(index,row)
  ModifyIndex = index
  typeFormList.id = row.id
  typeFormList.name = row.name
  typeFormList.attribute = row.attribute
  typeFormList.state = row.state
}

async function handleModify() {
  let modifyList = {
    id: typeFormList.id,
    name: typeFormList.name,
    attribute: typeFormList.attribute,
    state: typeFormList.state
  }
  const res = await service.jiaxiaohutong.jxTypeModify(modifyList)
  if (res.statusText === 'OK') {
    ElNotification({
      title: 'OK',
      message: '修改成功',
      type: 'success',
    })
    console.log(1)
    tableData[ModifyIndex] = modifyList
    dialogFormVisible.value = false
  } else {
    return
  }
}
</script>

<style scoped>
.mainInfo__form :deep(.bj){
  margin: 0 10px;
}

.mainInfo__form :deep(.el-text--primary){
  cursor:pointer;
}
</style>
